<!--
  功能：功能描述
  作者：霍抒杨
  邮箱：huosy68e@visionvera.com
  时间：2023年04月03日 21:49:35
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class='view-content'>
    <div class="video-cover" v-if="coverShow">
      <div class="title">{{ curData.title }}</div>
      <div><span class="xtitle">{{ curData.xtitle }}</span></div>
      <div class="nextbg" @click="nextFun"></div>
      <cover></cover>
    </div>
    <div class="children" v-if="!coverShow">
      <template v-for="(item,x) in curData.children.slice().reverse()">
        <div v-if="item.show" class="question-box" :key="x">
          <div>
            <div class="question"><em>{{ item.type }}</em>{{ (x+1) + "、" }}{{ item.question }}</div>
            <div v-if="item.imgurl != ''" class="imgbox"><img
                :src="require('../assets/img/'+$route.params.id+'/'+item.imgurl)">
            </div>
            <div class="options">
              <div class="option" @click="selectFun(item,im)" v-for="(im,y) in item.options" :key="y">
                <i :class="im.checked ? 'active' : ''">{{ im.checked ? '' : im.value }}</i>{{ im.name }}
              </div>
            </div>
            <!-- <div class="analysis" v-if="item.analysishow">题目解析：<br>{{item.analysis}}</div> -->
          </div>
          <span v-if="item.analysishow" class="close" @click="item.show = false"></span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  import list from "@/assets/global.json";
  import cover from "./components/cover.vue"
  export default {
    // 组件名称
    name: 'demo',
    // 组件参数 接收来自父组件的数据
    props: [],
    // 局部注册的组件
    components: {
      cover
    },
    // 组件状态值
    data() {
      return {
        curData: list.list[this.$route.params.id - 1],
        coverShow: true,
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      nextFun() {
        this.coverShow = false
      },
      selectFun(item, im) {
        if (item.correct == im.value) {
          im.checked = true;
          item.analysishow = true;
        }
      }
    },
    mounted() {}
  }
</script>